{% extends "base-user.html" %}

{% block css%}   
{% endblock %}

{% block js%}    
<!-- FLOT CHARTS -->
<script src="/static/js/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="/static/js/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="/static/js/plugins/flot/jquery.flot.pie.min.js" type="text/javascript"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="/static/js/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>

<!-- Page script -->
<script type="text/javascript">

    $(function() {
        /*
         * DONUT CHART
         * -----------
         */
        var donutData = [
            {label: "us", data: {{ pi_ret.message.cpu }}, color: "#3c8dbc"},
            {label: "id", data: 100 - {{ pi_ret.message.cpu }}, color: "#00c0af"}
        ];
        $.plot("#donut-chart", donutData, {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    innerRadius: 0.5,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: labelFormatter,
                        threshold: 0.1
                    }

                }
            },
            legend: {
                show: false
            }
        });
        /*
         * END DONUT CHART
         */
          /*
         * BAR CHART
         * ---------
         */

        var bar_data = {
            data: [["Total", {{ pi_ret.message.memory_info.total }} ], ["Used", {{ pi_ret.message.memory_info.used }}-{{ pi_ret.message.memory_info.cached }}- {{ pi_ret.message.memory_info.buffers }}], 
            ["Free", {{ pi_ret.message.memory_info.free }} + {{ pi_ret.message.memory_info.cached }} +  {{ pi_ret.message.memory_info.buffers }}  ], ["Shared", {{ pi_ret.message.memory_info.shared }} ], 
            ["Buffers", {{ pi_ret.message.memory_info.buffers }} ], ["Cached", {{ pi_ret.message.memory_info.cached }} ]],
                color: "#3c8dbc"
        };
        $.plot("#bar-chart", [bar_data], {
            grid: {
                borderWidth: 1,
                borderColor: "#f3f3f3",
                tickColor: "#f3f3f3"
            },
            series: {
                bars: {
                    show: true,
                    barWidth: 0.5,
                    align: "center"
                }
            },
            xaxis: {
                mode: "categories",
                tickLength: 0
            }
        });
        /* END BAR CHART */

            //发出ajax请求  
            $("button").click( function(){  
                if($(this).attr('id') == 'shutdown') {
                    $.getJSON("{% url 'PiApp.api.piclient_api' %}",  {cmd:'shutdown'})     
                }
                else if ($(this).attr('id') == 'reboot') {
                     $.getJSON("{% url 'PiApp.api.piclient_api' %}",  {cmd:'reboot'} )      
                }                     
            }); 

    });

    /*
     * Custom Label formatter
     * ----------------------
     */
    function labelFormatter(label, series) {
        return "<div style='font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;'>"
                + label
                + "<br/>"
                + Math.round(series.percent) + "%</div>";
    }

    $('.box-file').slimScroll({
        height: '436px'
    });

</script>

{% endblock %}

{% block on_ready%}    
{% endblock %}

{% block content %} 
{% if   pi_ret.connect %}
<div class="row ">
   <div class="col-md-7 ">

    <div class="box box-solid box-success ">
        <div class="box-header">
            <i class="fa fa-desktop"></i>
            <h3 class="box-title">System</h3>
        </div><!-- /.box-header -->
        <div class="box-body  ">
            <dl class="dl-left">
                <dt  >Pi Name</dt>
                <dd>{{ pi_ret.message.name }}</dd> 
                <dt  >Kernel Version</dt>
                <dd>{{ pi_ret.message.kernel_version }}</dd> 
                <dt  >Uptime</dt>
                <dd> {{ pi_ret.message.uptime }}</dd> 
                <dt  >Load Average</dt>
                <dd>{{ pi_ret.message.loadavg.0 }}, {{ pi_ret.message.loadavg.1 }}, {{ pi_ret.message.loadavg.2 }}</dd> 
            </dl>
        </div><!-- /.box-body -->
        <div class="box-footer">
           <button type="button"  id="shutdown" class="btn btn-success">Shutdown</button>
           <button type="button"  id="reboot" class="btn btn-success btn-right">Reboot</button>
       </div>
       
   </div><!-- /.box -->


   <div class="box  box-navy box-solid ">
    <div class="box-header">
        <i class="fa fa-desktop"></i>
        <h3 class="box-title">File Systems</h3>
    </div><!-- /.box-header -->
    <div class="box-body  box-file no-padding">
        <table class="table table-striped table-bordered table-responsive table-break">
            <tr>
                <th>Filesystem</th>
                <th>Mount Point</th>
                <th>Available</th>
                <th>Used</th>
            </tr>
            {% for value in pi_ret.message.filesystem_info %}
            <tr >
                <td>   {{ value.filesystem }}</td>
                <td>{{ value.mount_point }}</td>
                <td> {{ value.available }} KB</td>
                <td><span class="badge bg-navy">{{ value.used }}%</span></td>
            </tr>

            {% endfor %}
        </table>
    </div><!-- /.box-body -->
</div><!-- /.box -->

</div>	

<div class="col-md-5 ">

    <!-- Donut chart -->
    <div class="box box-solid box-primary">
        <div class="box-header">
            <i class="fa fa-bar-chart-o"></i>
            <h3 class="box-title">CPU</h3>
        </div>
        <div class="box-body">
            <div id="donut-chart" style="height: 300px;"></div>
        </div><!-- /.box-body-->
    </div><!-- /.box -->
    

    <!-- Bar chart -->
    <div class="box box-solid box-warning">
        <div class="box-header">
            <i class="fa fa-bar-chart-o"></i>
            <h3 class="box-title">Memory</h3>
        </div>
        <div class="box-body">
            <div id="bar-chart" style="height: 300px;"></div>
        </div><!-- /.box-body-->
    </div><!-- /.box -->


</div>

{% else %}
<div class="row " style="text-align: center;">
   <div class="headline text-info" style="  font-size: 80px;"> ERROR</div>
</div>
<div class="row " style="text-align: center;">
    <div class="error-content">
        <h3><i class="fa fa-warning text-yellow"></i> Device not Found.</h3>
        <p>
            We could not connect the device.
            Meanwhile, you may <a href="{% url 'PiApp.views.settings_general_view' %}">configure the addr</a>
        </p>
    </div><!-- /.error-content -->
</div><!-- /.error-page -->
</div>
{% endif %}


{% endblock %}